import React, { memo, useEffect } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'

import {
  HotDjWrapper,
  HeaderWrapper,
  ContentWrapper
} from './style'
import {
  getHotDjDataAction
} from '../../store/actionCreator'
import {formatImg} from '@/utils/format'
export default memo(function HotDj() {
  const dispatch = useDispatch()
  const { hotDjList } = useSelector(state => ({
    hotDjList:state.getIn(['recommend','hotDjList'])
  }),shallowEqual)
  useEffect(() => {
    dispatch(getHotDjDataAction(5))
  },[dispatch])
  return (
    <HotDjWrapper>
      <HeaderWrapper>
        <div className='title'>热门主播</div>
      </HeaderWrapper>
      <ContentWrapper>
        {
          hotDjList.map(item => {
            return (
              <div className="item" key={item.id}>
              <div className="left">
                <img src={formatImg(item.picUrl,40)} alt="" />
              </div>
              <div className="right">
                <div className="name text-nowrap">{ item.name }</div>
                <div className="alias text-nowrap">{ item.rcmdtext }</div>
              </div>
            </div>
            )
          })
        }
      </ContentWrapper>
    </HotDjWrapper>
  )
})
